<template>
  <view class="app">
    <view class="back-btn mix-icon icon-xiangzuo" @click="navBack"></view>
    <view class="page-tip">登录/注册</view>
    <view class="agreement">
      <text
        class="mix-icon icon-xuanzhong"
        :class="{ active: agreement2 }"
        @click="checkAgreement2"
      ></text>
      <text @click="checkAgreement2"
        >首次登录自动注册平台及货主账号，且已阅读并同意</text
      >
      <text class="tit" @click="navToAgreementDetail(0)">《用户服务协议》</text>
      <text class="tit" @click="navToAgreementDetail(1)"
        >《个人信息保护政策》</text
      >
      <text class="tit" @click="navToAgreementDetail(2)">《账号关联协议》</text>
    </view>
    <view class="agreement2">
      <text
        class="mix-icon icon-xuanzhong"
        :class="{ active: agreement }"
        @click="checkAgreement"
      ></text>
      <text @click="checkAgreement">已阅读并同意</text>
      <text class="tit" @click="navToAgreementDetail(3)"
        >《第三方合作清单》</text
      >
    </view>
    <view class="wrapper">
      <view class="welcome">
        <!-- <image class="logo" src="/static/login_bg.png"></image> -->
      </view>
      <view class="input-content">
        <view class="input-item">
          <view class="row">
            <input
              v-model="username"
              type="number"
              maxlength="11"
              placeholder="请输入手机号"
              placeholder-style="color: #909399"
            />
          </view>
        </view>
        <view class="input-item">
          <view class="row">
            <input
              v-model="code"
              type="number"
              maxlength="6"
              placeholder="请输入验证码"
              placeholder-style="color: #909399"
            />
            <mix-code
              :mobile="username"
              templateCode="SMS_194050994"
            ></mix-code>
          </view>
        </view>
      </view>
      <mix-button
        ref="confirmBtn"
        text="同意协议并登录"
        marginTop="60rpx"
        style="border-radius: 10rpx"
        @onConfirm="login"
      ></mix-button>

      <!-- #ifdef APP-PLUS || MP-WEIXIN -->
      <view class="other-wrapper">
        <view class="line center">
          <text class="tit">快捷登录</text>
        </view>
        <view class="list row">
          <!-- #ifdef MP-WEIXIN -->
          <view class="item column center" @click="mpWxGetUserInfo">
            <image class="icon" src="/static/icon/login-wx.png"></image>
          </view>
          <!-- #endif -->

          <!-- #ifdef APP-PLUS -->
          <view
            v-if="canUseAppleLogin && false"
            class="item column center"
            style="width: 180rpx"
            @click="loginByApple"
          >
            <image class="icon" src="/static/icon/apple.png"></image>
            <text>Apple登录</text>
          </view>
          <view
            class="item column center"
            style="width: 180rpx"
            @click="loginByWxApp"
          >
            <image class="icon" src="/static/icon/login-wx.png"></image>
            <text>微信登录</text>
          </view>
          <!-- #endif -->
        </view>
      </view>
      <!-- #endif -->
    </view>

    <mix-loading v-if="isLoading"></mix-loading>
  </view>
</template>

<script>
import { LOGIN_JWT } from '@/common/api';

import { checkStr } from '@/common/js/util';
import loginMpWx from './mixin/login-mp-wx.js';
import loginAppWx from './mixin/login-app-wx.js';
import loginApple from './mixin/login-apple.js';
export default {
  mixins: [loginMpWx, loginAppWx, loginApple],
  data() {
    return {
      canUseAppleLogin: false,
      agreement: false,
      agreement2: false,
      username: '',
      code: '',
    };
  },
  onLoad() {
    console.log(1);
  },
  methods: {
    loginSuccessCallBack(data) {
      this.$util.msg('登陆成功');
      this.$store.commit('setToken', data);
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    },
    //手机号登录
    async login() {
      if (!this.agreement2) {
        this.$util.msg('请阅读并同意用户服务及隐私协议');
        this.$refs.confirmBtn.stop();
        return;
      }
      if (!this.agreement) {
        this.$util.msg('请阅读并同意第三方合作清单');
        this.$refs.confirmBtn.stop();
        return;
      }
      const { username, code } = this;
      if (!checkStr(username, 'mobile')) {
        this.$util.msg('请输入正确的手机号码');
        this.$refs.confirmBtn.stop();
        return;
      }
      if (!checkStr(code, 'mobileCode')) {
        this.$util.msg('验证码错误');
        this.$refs.confirmBtn.stop();
        return;
      }
      // const res = await this.$request('user', 'login', {username,code});
      const res = await this.$http.post(LOGIN_JWT, { username, code });
      // console.log("🚀 ~ file: login.vue ~ line 125 ~ login ~ res", res)
      this.$refs.confirmBtn.stop();

      if (res.Code == 200) {
        this.loginSuccessCallBack(res.Data);
      } else {
        this.$util.msg(res.Msg);
      }
    },
    navBack() {
      uni.navigateBack();
    },
    //同意协议
    checkAgreement() {
      this.agreement = !this.agreement;
    },
    checkAgreement2() {
      this.agreement2 = !this.agreement2;
    },
    //打开协议
    navToAgreementDetail(type) {
      this.navTo(
        '/pages/public/web-view?url=' + this.$config['agreement' + type]
      );
    },
  },
};
</script>

<style>
page {
  background: #fff;
}
</style>
<style scoped lang="scss">
.app {
  padding-top: 15vh;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
.wrapper {
  position: relative;
  z-index: 90;
  padding-bottom: 40rpx;
}
.back-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 32rpx;
  color: #222222;
}
.page-tip {
  position: absolute;
  left: 50%;
  top: calc(var(--status-bar-height) + 34rpx);
  z-index: 90;
  margin-left: -80rpx;
  font-size: 34rpx;
  color: #222222;
  line-height: 34rpx;
}
.welcome {
  position: relative;
  left: 0rpx;
  top: -90rpx;
  height: 540rpx;
  background-image: url('../../static/login_bg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.input-content {
  padding: 0 60rpx;
}
.input-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100rpx;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 0rpx;
  .row {
    width: 100%;
  }
  input {
    flex: 1;
    height: 60rpx;
    font-size: 30rpx;
    color: #303133;
    width: 100%;
  }
}
/* 其他登录方式 */
.other-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20rpx;
  margin-top: 80rpx;

  .line {
    margin-bottom: 40rpx;

    .tit {
      margin: 0 32rpx;
      font-size: 24rpx;
      color: #606266;
    }
    &:before,
    &:after {
      content: '';
      width: 160rpx;
      height: 0;
      border-top: 1px solid #e0e0e0;
    }
  }
  .item {
    font-size: 24rpx;
    color: #606266;
    background-color: #fff;
    border: 0;

    &:after {
      border: 0;
    }
  }
  .icon {
    width: 90rpx;
    height: 90rpx;
    margin: 0 24rpx 16rpx;
  }
}

.agreement,
.agreement2 {
  position: absolute;
  left: 9%;
  bottom: 10vh;
  z-index: 1;
  width: 90%;
  height: 90rpx;
  font-size: 24rpx;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  &.agreement2 {
    bottom: 5vh;
  }

  .mix-icon {
    font-size: 36rpx;
    color: #ccc;
    margin-right: 8rpx;
    margin-top: 1px;

    &.active {
      color: $base-color;
    }
  }
  .tit {
    color: #40a2ff;
  }
}
</style>
